<template>
    <div class="BusinessArrears-box">
        <h5>客户类型分布</h5>
        <div ref="target" class="content"></div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";

// const props = defineProps({
//     data: {
//         type: Object,
//         required: true,
//     },
// });
let target = ref(null);
let myChart = null;
onMounted(() => {
    myChart = echarts.init(target.value);
    renderChart();
});
// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );
let option = {
  legend: {
    orient: 'horizontal',
    top: 0,
    left: 0,
    itemWidth: 15,
    itemHeight: 15,
    textStyle: {
      fontSize: 16
    }
  },

  tooltip: { trigger: 'item',},
  series: [
    {
      type: 'pie',
      selectedMode: 'single',
      center: ['50%', '60%'],
      selectedOffset: 30,
      clockwise: true,
      labelLine: {
       show: false
      },
      label: {
        show: false,
      },
      data: [
        {
          value: 1048,
          name: '外协流程',
          itemStyle: {
            normal: {
              color: 'rgb(29,200,236)'
            }
          }
        },
        {
          value: 735,
          name: '标准流程',
          itemStyle: {
            normal: {
              color: 'red'
            }
          }
        },
        {
          value: 580,
          name: '散客',
          itemStyle: {
            normal: {
              color: 'green'
            }
          }
        }
      ],
      itemStyle: {
        opacity: 0.7,
        fontSize: 16,
        color: {
          repeat: 'repeat'
        },
        shadowBlur: 10, //图形阴影的模糊大小
        shadowColor: '#ffffff', //阴影颜色
      }
    }
  ]
};
const renderChart = () => {
    myChart.setOption(option);

    // 图表自适应
    window.addEventListener('resize', () => {
        myChart.resize()
    })
};
</script>
<style scoped lang='scss'>
.BusinessArrears-box {
    width: 52%;
    height: 100%;
    cursor: pointer;
  z-index: 10 !important;
    h5 {
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: black;
        font-size: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        font-weight: 600;
        margin: 40px 0;

        &::after {
            content: '';
            width: 5px;
            height: 20px;
            background-color: #1947FF;
            border-radius: 5px;
            position: absolute;
            left: -9px;
            top: 0px;
        }
    }


    .content {
        width: 100%;
        height: calc(100% - 86px);
    }
}
</style>
